<script setup>
import {CommonUtils} from 'great-jsutils';
</script>
<template>
<h2>deom07-for03</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for嵌套循环</div>
    <div  class="zhtt-demo-card-body">
      <p v-for="nums in sets">
        <span v-for="num in nums">{{num}}、</span>
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for嵌套中使用方法(计算不能完成)</div>
    <div  class="zhtt-demo-card-body">
      <p v-for="nums in sets">
        <span v-for="num in even(nums)">{{num}}、</span>
      </p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for="n in 10"</div>
    <div  class="zhtt-demo-card-body">
      <span v-for="n in 10" :key="n">{{ n }}、 </span>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">v-for使用template，渲染一组</div>
    <div  class="zhtt-demo-card-body">
      <ul>
        <template  v-for="item in items">
          <li class="li">{{item.message}}</li>
          <li class="li" style="color:#a2a2a2;margin-bottom:4px;">{{item.id}}</li>
        </template>
      </ul>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">在组件上使用v-for？</div>
    <div  class="zhtt-demo-card-body">
      <h2>在组件上使用v-for？</h2>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
</template>

<script>
export default {
  name: "deom07-for03",
  beforeCreate() {
    console.log('beforeCreate');
  },
  data(){
    return {
      keyword:'',
      sets:[
        [2,3,4,6,9],[21,32,44,56],[11,23,53,22,45]
      ],
      items: [
        { message: 'Foo',id:CommonUtils.uuid() },
        { message: 'Aaa',id:CommonUtils.uuid() },
        { message: 'HTTP',id:CommonUtils.uuid() },
        { message: 'FTP',id:CommonUtils.uuid() },
        { message: 'UDP',id:CommonUtils.uuid() },
        { message: 'DSA',id:CommonUtils.uuid() },
        { message: 'Bar',id:CommonUtils.uuid() }
      ]
    }
  },
  methods:{
    even(numbers) {
      return numbers.filter(number => number % 2 === 0)
    }
  }
}
</script>
<style scoped>
ul{
  margin:12px;
}
.li{
  list-style: none;
}
.li-inline{display: inline-block;padding-right:10px;}
</style>